<template>
    <div>
        <div class="nav-bar">
            <div class="bottom">
                <span>
                    <van-icon @click="$router.push('/replace/balance')" class="go-back" name="arrow-left" />
                </span>
                <span>提现账户</span>
            </div>
        </div>
        <div class="count_list">
            <label>
            <span class="weight">账户</span>
            <span class="weight">类型</span>
            </label>
            <span class="edit_div operating">操作</span>
        </div>
        <div class="count_list" v-for="(item,index) in payDataList" :key="index">
            <label :for="item.id">
                <span>{{item.account | num}}{{'('+item.account_name+')'}}</span>
                <span>{{item.account_type==1?'支付宝':'银行卡'}}</span>
            </label>
            <span class="edit_div">
                <van-icon name="edit" @click='editPay(item)'/>
                <van-icon name="cross" @click='delPay(item)' />
            </span>
        </div>
    </div>
</template>
<script>
import {delWithdrawal,getWithdrawal} from  "@/api/withdrawal";
import { Dialog,Toast} from 'vant';
export default {
    data(){
        return {
            payType:1,
            payDataList:[]
        }
    },
    methods:{
        getAccountList(){
            getWithdrawal().then(res=>{
                this.payDataList = res.data
                if (this.payDataList.length == 0) {
                    this.$router.push('/replace/balance')
                }
            })
        },
        editPay(item){
             this.$router.push({
                 path:`/replace/editAccount`,
                 query:{
                     item:JSON.stringify(item),
                     type:item.type
                 }
             })
            console.log(item)

        },
        delPay(item){
            Dialog.confirm({
            title: '删除',
            message: `确认删除${item.account}?`,
            })
            .then(() => {
                // on confirm
                let params = {
                wr_id:item.id
                }
                delWithdrawal(params).then(res=>{
                    if (res.code == 200) {
                        Toast.success("删除成功");
                        this.$router.go(0);
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
            
        }
    },
    deactivated() {
        this.$destroy(true); //销毁组件
    },
    filters:{
        num(value){
            return value.slice(0,3) + '****' + value.slice(-3)
        }
    },
    created(){
        this.getAccountList()
    }
}
</script>
<style lang="less" scoped>
.nav-bar {
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 3000;
    margin-bottom: 20px;
    .bottom {
        padding: 0 .4rem;
        box-sizing: border-box;
        
        line-height: 1.333333rem;
        font-size: 20px;
        z-index: 1;
        text-align: center;
        >span {
            &:nth-child(1) {
                height: 1.333333rem;
                float: left;
                text-align: center;
                font-weight: 700;
                i{
                    line-height: 1.333333rem;
                }
            }
            &:nth-child(2) {
                text-align: center;
                font-weight: 700;
                
            }
            &:nth-child(3) {
                font-size: 14px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: #006CFF;
                float: right;
            }
        }
    }
}  
.count_list{
    width: 100%;
    height: 20px;
    margin-top: 10px;
    span{
        display: inline-block;
        text-align: center;
    }
    label{
        span:nth-child(1).weight,
        span:nth-child(2).weight
        {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #353535;
        }
        span:nth-child(1){
            width: 45%;
            font-size: 14px;
            font-family: PingFang-SC-Regular, PingFang-SC;
            font-weight: 400;
            color: #353535;
        }
        span:nth-child(2){
            width: 28%;
            font-size: 14px;
            font-family: PingFang-SC-Regular, PingFang-SC;
            font-weight: 400;
            color: #353535;
        }
    }
    .operating.edit_div{
        font-size: 14px;
        color: #000;
    }
    .edit_div{
        width: 13%;
        float: right;
        margin-right: 10px;
        font-size: 20px;
        color: #006CFF;
        i:nth-child(1){
            margin-right: 6px;
        }
    }
}
.trueadd_btn {
    width: 325px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #0016FF;
    border-radius: 22.5px;
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: calc(~'50% - 162.5px')
}
</style>